<template>
  <span class="status">
    <div v-if="matchStatus" :style="{ color: matchStatus.color }">
      <span v-if="matchStatus.hasIcon">{{ circular }}</span>
      {{ text }}
    </div>
    <div v-else>{{ text }}</div>
  </span>
</template>

<script>
  import { computed, defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'StatusIcon',
    props: {
      displayInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
      text: {
        type: String,
        default: () => {
          return ''
        }
      }
    },
    setup(props) {
      const circular = ref('●')
      const statusList = computed(() => {
        return props.displayInfo.statusList || []
      })
      const matchStatus = computed(() => {
        let res = null
        for (let i = 0; i < statusList.value.length; i++) {
          const { prefix, name } = statusList.value[i]
          if (matchValue(prefix, name)) {
            res = statusList.value[i]
          }
        }
        return res
      })
      const matchValue = (type, value) => {
        if (!props.text) {
          return false
        }
        switch (type) {
          case 'belong':
            return value.includes(props.text)
          case 'notBelong':
            return !value.includes(props.text)
          case 'contain':
            return props.text.includes(value)
          case 'notContain':
            return !props.text.includes(value)
          case 'empty':
            return !props.text.length
          case 'notEmpty':
            return props.text.length !== 0
          case 'startWith':
            return props.text.startsWith(value)
          case 'notStartWith':
            return !props.text.startsWith(value)
          case 'endWith':
            return props.text.endsWith(value)
          case 'notEndWith':
            return !props.text.endsWith(value)
          default:
            return true
        }
      }
      return {
        matchStatus,
        circular
      }
    }
  })
</script>
